import React, { Component } from 'react'
import { Button } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import {connect} from 'react-redux';
import axios from "axios";
import { Table, message } from 'antd';

class Aldo extends Component {
  componentDidMount(){
    if(this.props.datalist.length===0){
      this.props.setList()
    }
  }
  onUpdate = (item)=>{    
    axios.put(`http://localhost:8000/list/${item.id}`,{
        ...item,
        isDone:!item.isDone
      }).then(res=>{ 
        message.success('修改成功！');
    })
  }
  onDelete = (item) => {
    console.log(item);
    
    axios.delete(`http://localhost:8000/list/${item.id}`).then(res=>{ 
      message.success('删除成功！');
    })
  }
  state = {
    columns : [
      {
        title: '#', //列的名字
        dataIndex: 'id', //对应原始数据中 .属性
        id: 'id',
        render:item=>{
          return <b>{item}</b>
        }
      },
      {
        title: '事件名称', //列的名字
        dataIndex: 'name', //对应原始数据中 .属性
        id: 'name',
      },
      {
        title: '编辑',
        key: 'action',
        render: (item) => (<div>  
          <Button type="primary" onClick={ ()=>this.onUpdate(item) }> 
              置为未办
          </Button>   
          <Button type="primary" danger shape="circle" icon={<DeleteOutlined />} onClick={ ()=>this.onDelete(item) } />
        </div>
        ),
      },
    ]
  }
  render() {
    console.log(this.props.datalist);
    return (
      <div>
        <Table
          rowKey={item => item.id } 
          columns={this.state.columns}
          dataSource={this.props.datalist}
          pagination = { {pageSize:10} }
        />
      </div>
    )
  }
}
const mapStateToProps = (state)=>{
  return {
    datalist:state.todoList.filter(item=>item.isDone)
  }
}
const mapDispatchToProps  = {
  setList:()=>{
    return axios.get(`http://localhost:8000/list`).then(res=>{       
      return {
        type:"SetTodoList",
        payload:res.data
      }
    })
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Aldo)